/*@group datagrid*/
.datagrid {
    position: relative;
    overflow: hidden;
    background: #FFF;
    line-height: 18px;
    z-index: 0;
    /* scrollbar-face-color: #DDD;
    scrollbar-highlight-color: #666;
    scrollbar-shadow-color: #666;
    scrollbar-darkshadow-color: #CCC;
    scrollbar-track-color: #EEE; */
}
.datagrid.matchparent{
    width: 100%;
    height: 100%;
}
.datagrid a{
    cursor: pointer;
}
.datagrid.handcursor tbody tr{
    cursor: pointer;
}
.datagrid .hide{
    display: none !important;
    animation: none !important;
}
.datagrid .containerdiv {
    position: absolute;
    left: 0;
    right: 0;
    _width: 100%;
    top: 0;
    bottom: 26px;
    overflow: hidden;
}
.datagrid.noborder .containerdiv{
    border: none;
}
.datagrid.nopage .containerdiv {
    bottom: 0;
    _height: 100%;
    _h: none;
}
.datagrid .headdiv {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden;
}
.datagrid.vScroll .headdiv {
    right: 17px;
}
@media(-webkit-min-device-pixel-ratio:0){
    .datagrid.vScroll .headdiv {
        right: 12px;
    }
}
.datagrid .bodydiv {
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    _width: 100%;
    _height: 100%;
    bottom: 0;
}
.datagrid .bodydiv table {
    margin-bottom: 25px;
}
.datagrid.nofoot .bodydiv table {
    margin-bottom: 0;
}
.datagrid ::-webkit-scrollbar,
.datacombodropdown ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
/* Track */
.datagrid ::-webkit-scrollbar-track,
.datacombodropdown ::-webkit-scrollbar-track {
    background: #EEE;
    border-radius: 3px;
}
/* Handle */
.datagrid ::-webkit-scrollbar-thumb ,
.datacombodropdown ::-webkit-scrollbar-thumb {
    background: #CCC;
    border: solid 3px #EEE;
    border-radius: 6px;
}
.datagrid ::-webkit-scrollbar-thumb:hover,
.datacombodropdown ::-webkit-scrollbar-thumb:hover {
    background: #999;
}
.datagrid .footdiv {
    position: absolute;
    _width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    overflow: hidden;
}
.datagrid.nofoot .footdiv {
    display: none;
}
.datagrid .footdiv table {
    position: absolute;
    bottom: 0;
    _bottom: -1px;
}
.datagrid .footdiv thead{
    visibility: hidden;
}
.datagrid .footdiv thead th{
    border: none;
    background: transparent;
    color: transparent;
}
.datagrid.vScroll .footdiv {
    right: 17px;
}
@media(-webkit-min-device-pixel-ratio:0){
    .datagrid.vScroll .footdiv {
        right: 12px;
    }
}
.datagrid.hScroll .footdiv {
    bottom: 17px;
}
@media(-webkit-min-device-pixel-ratio:0){
    .datagrid.hScroll .footdiv {
        bottom: 13px;
    }
}

/* 表格 */

.datagrid table {
    width: 100%;
    *width: auto;
    min-width: 100%;
    text-align: center;
    border-collapse: collapse;
    table-layout: fixed;
}
.datagrid table th, .datagrid table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .25em .5em;
}
.datagrid table td {
    vertical-align: top;
}
.datagrid table td.dataeditable:hover{
    background: #ccc;
}
.datagrid table td.dataedit{
    padding: 0;
    text-align: left;
}
.datagrid .dataedit input,
.datagrid .dataedit select{
    width: 100%;
    height: 1.75em;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    *width: 98%;
    *height: 1em;
    padding: .25em 0;
}
.datagrid table thead th,.datagrid table tfoot td {
    background-color: #d8d8d8;
    background-image: -webkit-linear-gradient(top,#f9f9f9,#e3e4e6);
    background-image: -moz-linear-gradient(top,#f9f9f9,#e3e4e6);
    background-image: -ms-linear-gradient(top,#f9f9f9,#e3e4e6);
    white-space: nowrap;
    overflow: hidden;
    font-weight: normal;
    border: 1px solid rgb(197,197,197);
    border-right: none;
}
.datagrid table thead th:first-child,.datagrid table tfoot td:first-child {
    border-left: none;
}
.datagrid tbody tr td {
    border-bottom: 1px solid rgb(237, 237, 237);
    height: 1.5em;
}
.datagrid tbody tr.selected td{
    border-bottom: 1px dotted rgb(191, 184, 184);
}
.datagrid.noborder table th, .datagrid.noborder table td{
    border: none;
}
/*分页样式*/
.datagrid .pagediv {
    padding: 2px .5em;
    line-height: 22px;
    height: 22px;
    position: absolute;
    left: 0;
    right: 0;
    _width: 100%;
    bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    background-color: #d8d8d8;
    background-image: -webkit-linear-gradient(top, rgb(230, 230, 230), rgb(239, 239, 239));
    background-image: -moz-linear-gradient(top, rgb(230, 230, 230), rgb(239, 239, 239));
    background-image: -ms-linear-gradient(top, rgb(230, 230, 230), rgb(239, 239, 239));
    border: 1px solid rgb(197,197,197);
}
.datagrid.nopage .pagediv{
    display: none;
}
.datagrid .pagediv .prev,
.datagrid .pagediv .next,
.datagrid .pagediv .first,
.datagrid .pagediv .last{
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background: url("img/page.gif") no-repeat;
}
.datagrid .pagediv .prev{
    background-position: 0 0;
}
.datagrid .pagediv .next{
    background-position: -16px 0;
}
.datagrid .pagediv .first{
    background-position: 0 -16px;
}
.datagrid .pagediv .last{
    background-position: -16px -16px;
}
.datagrid .pagediv span, .datagrid .pagediv a {
    float: left;
    margin-right: .5em;
}
.datagrid .pagediv em {
    font-style: normal;
}
.datagrid .pagediv input{
    vertical-align: middle;
}
.datagrid .pagediv input.pageNo {
    width: 30px;
    height: 18px;
    box-sizing: border-box;
    vertical-align: baseline;
}
.datagrid .pagediv input.turnPage {
    width: 40px;
    background: none repeat scroll 0 0 #D4C8C8;
    border: 1px solid #EAECED;
    border-radius: 4px;
    box-shadow: -1px -1px #525050 inset;
    color: #05A5D8;
    cursor: pointer;
    font-weight: bold;
    height: 23px;
    line-height: 20px;
    text-align: center;
}
.datagrid .pagediv .disabled{
    /*color: #999;*/
    opacity: .3;
    filter: alpha(opacity = 30);
}

.datagrid table tbody tr:nth-child(2n) {
    background: #FAFAFA;
}

.datagrid table tbody tr:nth-child(2n+1) {
    background: #FFFFFF;
}

.datagrid .bodydiv table tr:hover {
    background: #eeeeee;
}

.datagrid .bodydiv table tr.selected {
    background: #E0E0E0;
}
/*@end*/

/*@group datatree*/
.datagrid .treehandle,.datagrid .treeicon{
    float: left;
    width: 18px;
    height: 18px;
    background: url("img/tree.gif") no-repeat;
    _display: inline;
}
.datagrid .treehandle{
    margin-right: -6px;
    cursor: pointer;
    background-position: 0 0;
}
.datagrid .treeicon{
    margin-right: .5em;
    background-position: 0 -18px;
}
.datagrid tr.expanded .treehandle,.datagrid tr.expanded .treeicon{
    background-position-x: -18px;
}
.datagrid tr.treeloading .treeicon{
    background: url("img/treeloading.gif") no-repeat center center;
}
.datagrid tr.leaf .treehandle,.datagrid tr.treeloading .treehandle{
    visibility: hidden;
}
.datagrid tr.leaf .treeicon{
    background-position: 0 -36px;
}
.datagrid tbody tr:not(.hide) td{
    -webkit-animation: slidein .164s 1;
    animation: slidein .164s 1;
}
/*@end*/

.dropdowndiv .datagrid{
    min-height: 20em;
    _height: 20em;
}

/*@group common*/
.txt-l {
    text-align: left;
}
.txt-r {
    text-align: right;
}
.txt-c {
    text-align: center;
}
.red {
    color: #f00;
}
.scroll{
    overflow: auto;
}
/*@end*/

/*@group datacombo*/
.datacombo{
    padding: 0 1.5em 0 .5em;
    line-height: 1.75;
    height: 1.75em;
    display: inline-block;
    border: 1px solid #ccc;
    background: url("img/drop.gif") right center no-repeat #fff;
    vertical-align: middle;
}
.datacombo:hover{
    border-color: #666;
}
.datacombo label{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    _width: 100%;
}
.datacombo select {
    display: none;
}
.datacomboselect{
    width: 10em;
}

.datacombodropdown, .dropdowndiv {
    position: absolute;
    border: 1px solid #666;
    z-index: 99999;
    background: #fff;
    min-width: 10em;
    -webkit-animation: slidein .164s 1;
    animation: slidein .164s 1;
}
.dropdowndiv.hide{
    display: none;
}
.datacombodropdown ul{
    line-height: 1.5;
    max-height: 20em;
    _height: 20em;
    overflow-y: auto;
    overflow-x: hidden;
}
.datacombodropdown li a{
    display: block;
    padding: 0 1.5em 0 .5em;
    white-space: nowrap;
    cursor: default;
    text-decoration: none;
    color: #000;
}
.datacombodropdown li a:hover{
    background: #FDFDD0;
}
.datacombodropdown li.selected a{
    background: #FFCC00;
}
.datacombodropdown .searchbar{
    padding-left: 1.5em;
    background: url("img/search.gif") 5px center no-repeat;
}
.datacombodropdown input{
    border: none;
    width: 100%;
    padding: .25em 0;
    outline: none;
    background: transparent;
}
/*@end*/

.dataloading{
    background-image: url("img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
}
.dataerror{
    color: red;
}
.datanoselect{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.clearbtn{
    background: transparent;
    border: none;
    width: 18px;
    margin-left: -18px;
    text-align: center;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #999;
}

/*@group ztree mod*/
.ztree{
    max-height: 20em;
    _height: 20em;
    overflow: auto;
}
.dropdowndiv .ztree,.dropdowndiv.ztree{
    min-width: 20em;
    _width: 20em !important;
}
.dropdowndiv.datagrid{
    min-width: 16em;
    _width: 20em !important;
    height: 20em;
}
/*@end*/

.datahelp{
    line-height: 1.5;
    padding: 1em 2em;
    min-width: 24em;
    width: 24em;
}
.datahelp h2{
    font-size: 14px;
    margin-bottom: 1em;
}
.datahelp p{
    margin-bottom: .5em;
}
.databtn{
    display: inline-block;
    line-height: 16px;
    padding: 2px 5px;
    text-decoration: none;
    color: #000;
    border: solid 1px transparent;
    border-radius: 3px;
}
.databtn:hover{
    border-color: #ccc;
    background-image: -webkit-linear-gradient(top,#f9f9f9,#e3e4e6);
    background-image: -moz-linear-gradient(top,#f9f9f9,#e3e4e6);
    background-image: -ms-linear-gradient(top,#f9f9f9,#e3e4e6);
}
.dataicon-help{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("img/edit.png") no-repeat center center;
    vertical-align: middle;
}

/*@group animation*/
@-webkit-keyframes slidein{
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0,.5em,0);
    }
    100%{
    }
}
@keyframes slidein{
    0%{
        opacity: 0;
        transform: translate3d(0,.5em,0);
    }
    100%{
    }
}
@-webkit-keyframes zoomin{
    0%{
        opacity: 0;
        -webkit-transform: scale3d(2,2,1);
    }
    100%{
    }
}
@keyframes zoomin{
    0%{
        opacity: 0;
        transform: scale3d(2,2,1);
    }
    100%{
    }
}
/*@end